<template>
  <el-card>
    <template #header>项目统计数据</template>
    <el-table v-loading="loading" :data="homeData" stripe style="width: 100%">
      <el-table-column prop="title" label="项目名称" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary"
            @click="toDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import router from '@/router';
import { home } from '../api/index';
import { ref, reactive } from 'vue'; 

const homeData = ref([]);
const loading = ref(true);

const getFengJiaData = async () => {
  loading.value = true;
  try {
    const res = await home();
    if (res.status === 2000) {
      homeData.value = res.data;
    } else {
      ElMessage.error(res.message);
    }
  } catch (error) {

  } finally {
    loading.value = false
  }
};
getFengJiaData();

// 跳转到详情页面
const toDetail = (data) =>{
  router.push({ path: "/home/detail", query: { 
    number: data.number,
    cool: data.cool,
    electric: data.electric,
    duration: data.duration,
    title: data.title
  }})
}
</script>
<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}


.loading-spinner {
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
